import { useState, useEffect } from 'react';
import { Collapse, Row, Col } from 'antd';
import styles from './index.less';

const { Panel } = Collapse;
const KrDetail = (props) => {
  const [val, setVal] = useState();

  useEffect(() => {
    setVal(props.value);
  }, [props.value]);
  return (
    <div>
      <Collapse>
        {val?.length > 0 &&
          val.map((item, index) => (
            <Panel key={`${index}`} header={<div style={{ color: '#6859c6' }}>KR名称：{item.krname}</div>}>
              <Row gutter={20}>
                <Col span={4}>
                  <span className={styles.label}>权重：</span>
                  {item.krweight}
                </Col>
                <Col span={4}>
                  <span className={styles.label}>进度：</span>
                  {item.krprocess || 0}
                </Col>
                <Col span={4}>
                  <span className={styles.label}>自评分：</span>
                  {item.krscore || 0}
                </Col>
                <Col span={4}>
                  <span className={styles.label}>最终得分：</span>
                  {item.krendscore || 0}
                </Col>
              </Row>
            </Panel>
          ))}
      </Collapse>
    </div>
  );
};

export default KrDetail;
